<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
</style>
<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <!-- 左侧菜单 -->
      <Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu active-name="UserList" theme="dark" width="auto" :class="menuitemClasses">
          <Submenu name="user">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              用户管理
            </template>
            <router-link :to="{name: 'UserList'}">
              <MenuItem name="UserList">
                <Icon type="ios-navigate"></Icon>
                <span>用户列表</span>
              </MenuItem>
            </router-link>

            <router-link :to="{name: 'AddUser'}">
              <MenuItem name="AddUser">
                <Icon type="ios-navigate"></Icon>
                <span>用户添加</span>
              </MenuItem>
            </router-link>
          </Submenu>

          <Submenu name="language">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              语言管理
            </template>
            <router-link :to="{name: 'LanguageHome'}">
              <MenuItem name="LanguageHome">
                <Icon type="ios-navigate"></Icon>
                <span>语言列表</span>
              </MenuItem>
            </router-link>
          </Submenu>

          <Submenu name="database">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              数据库管理
            </template>
            <router-link :to="{name: 'MysqlList'}">
              <MenuItem name="MysqlList">
                <Icon type="ios-navigate"></Icon>
                <span>Mysql</span>
              </MenuItem>
            </router-link>

            <router-link :to="{name: 'RedisList'}">
              <MenuItem name="RedisList">
                <Icon type="ios-navigate"></Icon>
                <span>Redis</span>
              </MenuItem>
            </router-link>
          </Submenu>

        </Menu>
        <div slot="trigger">
          trigger
        </div>
      </Sider>
      <!-- 右侧展示 -->
      <Layout>
        <!-- 右侧顶部栏 -->
        <Header class="layout-header-bar">

        </Header>


        <Breadcrumb style="margin-top: 20px;margin-left: 20px;font-size: 16px;">
          <BreadcrumbItem>Home</BreadcrumbItem>
          <BreadcrumbItem>Components</BreadcrumbItem>
          <BreadcrumbItem>Layout</BreadcrumbItem>
        </Breadcrumb>

        <!-- 右侧内容框 -->
        <Content :style="{margin: '20px',padding: '20px', background: '#fff'}">
          <router-view></router-view>
        </Content>
      </Layout>

    </Layout>
  </div>
</template>
<script>
  export default {
    name: 'Dashboard',
    data() {
      return {
        isCollapsed: false
      };
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    }
  }
</script>
